<template>
  <div>
    <section class="title">
      <span>确认支付信息</span>
    </section>
    <p class="product">信息详情</p>
    <section class="form">
      <div class="cost">
        <span>预付金额</span>
        <span>
          合计费用:<span class="price">{{ nums || 0 }}元</span>
        </span>
      </div>
      <el-table :data="orderList" border header-cell-class-name="title-style">
        <el-table-column label="用户名称" align="center">
          <template #default="scope">
            {{ getUserName() }}
          </template>
        </el-table-column>
        <el-table-column label="用户类型" align="center">
          <template #default="scope">
            {{ getUserRele() }}
          </template>
        </el-table-column>
        <el-table-column label="证书类型" align="center">
          <template #default="scope">
            {{ getIdentity() }}
          </template>
        </el-table-column>
        <el-table-column label="购买周期" align="center">
          <template #default="scope">
            {{ (scope.row.periodNum || 0) + unit(scope.row.periodType) }}
          </template>
        </el-table-column>
      </el-table>
    </section>
    <section style="margin: 30px 0">
      <span style="font-size: 18px; margin-left: 20px">当前余额：</span>
      <span style="font-size: 20px; color: red">{{ amounts }}</span>
      <span
        style="font-size: 20px; color: #409eff; margin-left: 10px"
        @click="handleRecharge"
      >
        立即充值
      </span>
    </section>
    <section class="checked">
      <el-radio-group v-model="payType">
        <el-radio
          v-for="(item, index) in payList"
          :key="index"
          :label="item.value"
          style="font-size: 14px; color: #909090"
          @change="handleCheck(item)"
        >
          <img :src="item.icon" style="width: 15px; height: 15px" />
          {{ item.title }}
        </el-radio>
      </el-radio-group>
    </section>
    <el-dialog v-model="accountShow" title="对公账户支付" width="30%" center>
      <div class="dialogContent">
        <p style="margin-bottom: 20px">
          开通后，您可以转账汇款至平台为您提供的专属汇款账号，平台在收到银行汇款后将自动匹配到您的专属汇款账号并为您完成充值.
        </p>
        <b>汇款账号如下:</b>
        <div class="notice">
          <el-icon color="orange" size="20"><WarningFilled /></el-icon>
          <p class="notice-msg">
            温馨提示:一般情况下当天到账，具体时间将受银行处理时间影响。建议您于北京时间17:00前进行转账，否则可能会出现延迟到账的情况。
          </p>
        </div>
        <div class="bank-msg-box">
          <div class="bank-msg-one">
            <div class="bank-msg-title">开户银行：</div>
            <div>{{ settingValue.bankOfDeposit || "无" }}</div>
          </div>
          <div class="bank-msg-one">
            <div class="bank-msg-title">开户名称：</div>
            <div>{{ settingValue.accountName || "无" }}</div>
          </div>
          <div class="bank-msg-one">
            <div class="bank-msg-title">对公账户账号：</div>
            <div>{{ settingValue.accountNumber || "无" }}</div>
          </div>
        </div>
        <template style="display: flex; align-items: center; flex-direction: column">
          <el-upload
            v-model:file-list="fileList"
            action=""
            :limit="1"
            list-type="picture-card"
            accept=".jpg,.jpeg,.png"
            :on-preview="handlePreview"
            :before-upload="handleUpload"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
          <el-button style="width: 200px; margin-top: 20px" @click="handlePayByAccount">
            支付完成
          </el-button>
        </template>
      </div>
    </el-dialog>
    <Img-preview v-model:show="imgShow" :imgs="[imgUrl]" />
  </div>
  <div class="price">
    <span class="amountTo">合计费用：</span>
    <span class="priceAmount">{{ nums || 0 }}元</span>
    <el-button @click="handleToBack" class="payment"> 上一步 </el-button>
    <el-button type="primary" class="payment" @click="handlePay">去支付</el-button>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { localCache } from "@/utils/cache";
import { ElMessage, type UploadUserFile } from "element-plus";
import { setting, upload } from "@/api/cloud/index";
import { buyServer } from "@/api/control/order";
import { Plus , WarningFilled } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
const router = useRouter();

const prop = defineProps({
  // 订单列表
  orderList: {
    type: Array,
    default: () => [],
  },
  // 余额
  amounts: {
    type: Number,
    default: 0,
  },
  // 总金额
  nums: {
    type: Number,
    default: 0,
  },
  // 待支付列表ID
  ids: {
    type: String,
    default: '',
  },
});

const getInfos = ref<any>({});

const baseURL = import.meta.env.VITE_BASE_URL;
const fileList = ref<UploadUserFile[]>([]); // 上传图片列表
const imgShow = ref(false); // 图片预览
const imgUrl = ref(""); // 图片地址
const payType = ref('');
const accountShow = ref(false); // 对公账户弹窗
const settingValue = ref<any>({}); // 对公账户账号
const payIndex = ref('');//支付方式
const payList = ref<any>([
  {
    icon: new URL(
      "@/assets/img/client/cloudMarketplace/components/grounp2257.png",
      import.meta.url
    ).href,
    title: "余额支付",
    value: "0",
  },
  {
    icon: new URL(
      "@/assets/img/client/cloudMarketplace/components/Group2256.png",
      import.meta.url
    ).href,
    title: "对公账户",
    value: "1",
  },
]);

onMounted(() => {
  getInfos.value = localCache.getCache("myInformationAll");
});

// 跳转充值
const handleRecharge = () => {
  router.push("/control/recharge/myRecharge");
};

// 返回上级
const handleToBack = () => {
  router.go(-1);
};

// 选择支付方式
const handleCheck = (item: any) => {
  payIndex.value = item.value;
  if (item.value == 1) {
    setting({ key: "ADMIN_ACCOUNT_NUMBER_SETTING" }).then((res:any) => {
      settingValue.value = JSON.parse(res.data.settingValue);
    });
  }
};
// 支付完成
const handlePayByAccount = () => {
  if (fileList.value.length == 0) {
    ElMessage.error("请上传图片");
    return;
  }
  const fileName = fileList.value.map((item: any) => item.name).join(',');
  complete(fileName);
};

// 支付完成
const complete = (val: string) => {
  buyServer({
    ids : prop.ids.split(","),
    paymentMethod: 'ACCOUNT',
    paymentVoucherAddress: val
  }).then((res: any) => {
    console.log(res, "支付");
    ElMessage.success("购买成功");
    router.push({
      path: "/client/cloudMarketplace/components/shoppingStep3",
      query: {
        sn: res.data.sn,
      },
    });
  });
};

const handlePay = () => {
  if (payIndex.value == "0") {
    accountShow.value = false;
    //余额支付
    if (prop.amounts >= parseFloat(prop.nums)) {
      buyServer({
        ids : prop.ids.split(","),
        paymentMethod: 'WALLET',
      }).then((res: any) => {
        console.log(res, "支付");
        ElMessage.success("购买成功");
        router.push({
          path: "/client/cloudMarketplace/components/shoppingStep3",
          query: {
            sn: res.data.sn,
          },
        });
      });
    } else {
      ElMessage.warning("余额不足,请前往充值");
    }
  } else if (payIndex.value == "1") {
    //对公账户
    accountShow.value = true;
  } else {
    ElMessage.warning("请选择支付方式");
    accountShow.value = false;
  }
};

// 预览图片
const handlePreview = (uploadFile: any) => {
  imgUrl.value = baseURL + uploadFile.url;
  imgShow.value = true;
};

// 上传图片
const handleUpload = (file: any) => {
  const formData = new FormData();
  formData.append("file", file);
  upload(formData).then((res: any) => {
    fileList.value.push({ name: res.fileName, url: baseURL + res.fileName });
  });
  return false;
};

const getIdentity = () => {
  const { userType } = getInfos.value;
  if (userType != "02") {
    return "身份证认证";
  } else {
    return "单位证书";
  }
};

// 用户身份
const getUserRele = () => {
  const { userType } = getInfos.value;
  switch (userType) {
    case "00":
      return "系统用户";
      break;
    case "01":
      return "普通用户";
      break;
    case "02":
      return "企业用户";
      break;
    default:
      return "个人认证企业";
      break;
  }
};

// 用户名称
const getUserName = () => {
  return getInfos.value.user.userName;
};

// 单位
const unit = (val) => {
  if (0 == val) {
    return "次";
  } else if (1 == val) {
    return "天";
  } else if (30 == val) {
    return "个月";
  } else if (365 == val) {
    return "年";
  } else {
    return "";
  }
};
</script>
<style lang="less" scoped>
@borbom:1px solid rgba(227, 232, 240, 0.5);

.price {
  width: 100%;
  height: 95px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: flex-end;

  .amountTo {
    float: right;
    font-size: 14px;
    font-weight: 500;
    line-height: 40px;
  }

  .priceAmount {
    margin-left: 10px;
    float: right;
    font-size: 20px;
    font-weight: 600;
    color: #ff3939;
    line-height: 40px;
  }
  .payment {
    width: 126px;
    height: 40px;
    float: right;
    margin-left: 40px;
  }
}
.title {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #e3e8f0;
  display: flex;
  align-items: center;
  span:nth-child(1) {
    font-size: 18px;
    font-weight: 600;
  }
  span:nth-child(2) {
    height: 18px;
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    color: #4098ff;
    padding: 0 20px;
    margin-left: 20px;
    border-left: 2px solid #4098ff;
  }
}
.product {
  width: 100%;
  font-size: 18px;
  font-weight: 600;
  margin: 40px 0;
}
.form {
  width: 100%;
  border: @borbom;
  display: flex;
  font-size: 14px;
  flex-direction: column;
  margin-bottom: 50px;
  .cost {
    width: 100%;
    height: 60px;
    display: flex;
    font-weight: 600;
    padding: 0 50px;
    justify-content: space-between;
    align-items: center;
    border-bottom: @borbom;
    .price {
      margin-left: 10px;
      font-size: 20px;
      font-weight: 600;
      color: #ff3939;
    }
  }
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.dialogContent {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;

  .notice {
    display: flex;
    padding: 10px 20px;
    margin-top: 10px;
    background-color: rgb(236, 237, 237);

    .notice-msg {
      margin-left: 10px;
    }
  }

  .bank-msg-box {
    .bank-msg-one {
      display: flex;
      margin: 10px 0;
      .bank-msg-title {
        width: 30%;
      }
    }
  }
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
<style>
.title-style {
  height: 60px;
  background-color: #f6faff !important;
}
</style>
